<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>文章列表</title>
  <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/iconfont.css">
  <link rel="stylesheet" href="css/main.css">
  <script src="js/jquery-1.12.4.min.js"></script>
  <script src="js/bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container-fluid">
  <div class="common_title">
    文章类别管理
  </div>
  <div class="container-fluid common_con">
    <table class="table table-striped table-bordered table-hover mp20 category_table">
      <thead>
      <tr>
        <th>名称</th>
        <th>Slug</th>
        <th class="text-center" width="100">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>未分类</td>
        <td>uncategorized</td>
        <td class="text-center">
          <a href="javascript:editTr({&quot;id&quot;:&quot;1&quot;,&quot;slug&quot;:&quot;uncategorized&quot;,&quot;name&quot;:&quot;未分类&quot;});"
             class="btn btn-info btn-xs">编辑
          </a>
          <a href="javascript:deleteTr( 1 );" class="btn btn-danger btn-xs">删除</a>
        </td>
      </tr>

      <tr>
        <td>奇趣事</td>
        <td>funny</td>
        <td class="text-center">
          <a href="javascript:editTr({&quot;id&quot;:&quot;2&quot;,&quot;slug&quot;:&quot;funny&quot;,&quot;name&quot;:&quot;奇趣事&quot;});"
             class="btn btn-info btn-xs">编辑
          </a>
          <a href="javascript:deleteTr( 2 );" class="btn btn-danger btn-xs">删除</a>
        </td>
      </tr>

      <tr>
        <td>会生活</td>
        <td>living</td>
        <td class="text-center">
          <a href="javascript:editTr({&quot;id&quot;:&quot;3&quot;,&quot;slug&quot;:&quot;living&quot;,&quot;name&quot;:&quot;会生活&quot;});"
             class="btn btn-info btn-xs">编辑
          </a>
          <a href="javascript:deleteTr( 3 );" class="btn btn-danger btn-xs">删除</a>
        </td>
      </tr>

      <tr>
        <td>爱旅行</td>
        <td>travel</td>
        <td class="text-center">
          <a href="javascript:editTr({&quot;id&quot;:&quot;4&quot;,&quot;slug&quot;:&quot;travel&quot;,&quot;name&quot;:&quot;爱旅行&quot;});"
             class="btn btn-info btn-xs">编辑
          </a>
          <a href="javascript:deleteTr( 4 );" class="btn btn-danger btn-xs">删除</a>
        </td>
      </tr>
      </tbody>
      <tfoot>
      <tr>
        <td colspan="3" class="text-center">
          <a href="#" class="btn btn-success" data-toggle="modal" data-target="#addModal">新增分类</a>
        </td>
      </tr>
      </tfoot>
    </table>
  </div>
</div>

<div class="modal fade" id="addModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
        <h4 class="modal-title">新增分类</h4>
      </div>
      <div class="modal-body">
        <form>
          <input type="hidden" id="categoryId" name="id">
          <div class="form-group">
            <label for="name" class="control-label">分类名称:</label>
            <input type="text" class="form-control" id="name" name="name" value="名字1">
          </div>
          <div class="form-group">
            <label for="slug" class="control-label">分类别名:</label>
            <input type="text" class="form-control" id="slug" name="slug" value="slug1">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="model_shutoff">关闭</button>
        <button type="button" class="btn btn-primary" id="model_add">确定</button>
        <button type="button" class="btn btn-primary" id="model_mod" style="display: none">确定</button>
      </div>
    </div>
  </div>
</div>

<script>
  $('#addModal').modal({
    show: false,
    backdrop: false
  });

  $('#model_shutoff').click(function () {
    $('#addModal').modal('hide');
  });

  $('#model_add').click(function () {
    $('#addModal').modal('hide');
  });
  $('#model_mod').click(function () {
    $('#addModal').modal('hide');
  });

  $('.category_table').delegate('a', 'click', function () {
    if ($(this).hasClass('btn-info')) {
      $('#addModal .modal-title').html('修改分类名称');
      $('#addModal').modal('show');
    }
  })
</script>
<script src="js/template-web.js"></script>
<script id="categoryList" type="text/html">
  {{each data}}
  <tr>
    <td>{{$value.name}}</td>
    <td>{{$value.slug}}</td>
    <td class="text-center">
      <a href="javascript:editTr('{{$value.id}}','{{$value.name}}','{{$value.slug}}')"
         class="btn btn-info btn-xs" data-id="{{$value.id}}">编辑
      </a>
      <a href="javascript:deleteTr('{{$value.id}}');" class="btn btn-danger btn-xs" data-id="{{$value.id}}">删除</a>
    </td>
  </tr>
  {{/each}}
</script>
<script !src="">
  function load() {
    $.ajax({
      url: 'http://localhost:8080/admin/category/list',
      method: 'get',
      dataType: 'json',
      data: {},
      // data: formData,
      success: function (data) {
        console.log('ajax结果', data);
        if (data.code === 200) {
          let tbodyHtml = template('categoryList', data);
          $('tbody').html(tbodyHtml)
        } else {
          alert(data.msg)
        }
      }
    })
  }

  //删除文章
  function deleteTr(id) {
    console.log('删除的id为', id)
    $.ajax({
      url: 'http://localhost:8080/admin/category/delete',
      method: 'post',
      dataType: 'json',
      data: {
        'id': id
      },
      // data: formData,
      success: function (data) {
        console.log('ajax结果', data);
        if (data.code === 204) {
          load();
        } else {
          console.log(data.msg);
        }
      }
    })
  }

  //修改文章
  function editTr(id, name, slug) {
    //获取指定文章信息
    $('#categoryId').val(id);
    $('#name').val(name);
    $('#slug').val(slug);
    $("#model_add").hide();
    $('#model_mod').show();

  }

  $(function () {
    load();
    //新增文章
    $('body').on({
      click: function (e) {
        $("#model_add").show();
        $('#model_mod').hide();
        // 动态委派
        console.log('click', '#model_add');
        //传输文件时候才用哦
        let formData = new FormData($('form')[0]);
        console.log(formData.get('name'))
        console.log(formData.get('slug'))
        $.ajax({
          url: 'http://localhost:8080/admin/category/add',
          method: 'post',
          dataType: 'json',
          data: $('form').serialize(),
          success: function (data) {
            console.log('ajax结果', data);
            if (data.code === 201) {
              load();
            } else {
              alert(data.msg)
            }
          }
        })
      }
    }, '#model_add');
    $('body').on({
      click: function (e) {
        // 动态委派
        console.log('click', '#model_mod');
        $.ajax({
          url: 'http://localhost:8080/admin/category/edit',
          method: 'post',
          dataType: 'json',
          data: $("form").serialize(),
          // data: formData,
          success: function (data) {
            console.log('ajax结果', data);
            if (data.code === 200) {
              load();
            } else {
              alert(data.msg)
            }
          }
        })
      }
    }, '#model_mod');
  })
</script>
</body>

</html>